﻿<template>
  <div class="content-add">
    <el-popover
      placement="right"
      width="200"
      trigger="click"
      >
      <el-collapse accordion class = 'myCollapse'>
      <el-collapse-item title = '布局元素'>
        <div class='metali'>
          <li :class = "item.type === 'grid' ? 'data-grid': 'tabs-grid'" v-for = '(item) in layoutComponents' :key = 'item.key' @click="addItem(item)">
            <i class = 'iconfont ' :class = 'item.icon'></i>
            <span>{{item.name}}</span>
          </li>
        </div>
      </el-collapse-item>
      <el-collapse-item title = '表单元素'>
        <div class='metali'>
          <li v-for = '(item, index) in formComponents' :key = 'index' @click="addItem(item)">
            <i class = 'iconfont ' :class = 'item.icon'></i>
            <span>{{item.name}}</span>
          </li>
        </div>
      </el-collapse-item>
      <el-collapse-item title = '其它元素'>
        <div class='metali'>
          <li v-for = '(item, index) in otherComponents' :key = 'index' @click="addItem(item)">
            <i class = 'iconfont ' :class = 'item.icon'></i>
            <span>{{item.name}}</span>
          </li>
        </div>
      </el-collapse-item>
      <el-collapse-item title = '元数据'>
        <el-select v-model="metaUid" filterable  placeholder="请选择" @change="changMeta">
          <el-option
            v-for="(item,index) in metaList"
            :key="index"
            :label="item.metadesc"
            :value="item.metauid">
            <span style="float: left">{{ item.metadesc }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.metaname }}</span>
          </el-option>
        </el-select>
        <div class='metali'>
          <li v-for = '(item, index) in metaComponents' :key = 'index' @click="addItem(item)">
            <i class = 'iconfont ' :class = 'item.icon'></i>
            <span>{{item.config.label}}</span>
          </li>
        </div>
      </el-collapse-item>
    </el-collapse>
      <el-button type="success" icon="iconfont icon-add" slot="reference" @click="clickAdd">添加元素</el-button>
    </el-popover>
  </div>
</template>
<script>
import {deepCopy} from '../commonUse'
import { formComponents, layoutComponents, otherComponents } from '../data/componentsData'
import {getComponentByMetaColumnInfo} from './common'
export default {
  props: ['callbackArg', 'commonData'],
  components: {
  },
  mounted () {
    let self = this
    if (!this.metaList || this.metaList.length <= 0) {
      this.$nextTick(() => {
        self.metaList = self.$store.state.commonData.metaList_inc_fc
      })
    }
    if (!this.alltables || this.alltables.length <= 0) {
      this.$nextTick(() => {
        self.alltables = self.$store.state.commonData.alltables
      })
    }
  },
  data () {
    return {
      formComponents,
      layoutComponents,
      otherComponents,
      visible: false,
      metaUid: '',
      alltables: [],
      metaList: [],
      metaSubList: [],
      metaComponents: []
    }
  },
  watch: {
  },
  methods: {
    addItem (item) {
      // 为拖拽到容器的元素添加唯一 key
      let d = deepCopy(item)
      const key = Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 999999)
      Object.assign(d, {
        ...d, // 原有的属性
        config: {
          ...d.config,
          dataKey: d.config.dataKey ? d.config.dataKey : d.type + '_' + key,
          uid: d.config.uid ? d.config.uid : key
        }
      })
      this.$emit('addItem', d, this.callbackArg)
      // this.visible = true
    },
    clickAdd () {
      this.visible = !this.visible
    },
    changMeta () {
      if (!this.metaUid) {
        this.$message.error('请选择元数据表')
      }
      let self = this
      let metatable = this.metaList.find(item => {
        return item.metauid === self.metaUid
      })
      if (metatable) {
        this.metaComponents = []
        metatable.columns.forEach((item, index) => {
          let c = getComponentByMetaColumnInfo(item, self.metaUid, self.alltables)
          self.metaComponents.push(c)
        })
        this.metaSubList = this.metaList.filter(item => {
          return item.main_ref === self.metaUid
        })
      }
    }
  }
}
</script>
<style>
.content-add {
  width: 100%;
  text-align: center;
}
.metali {
  max-height: 200px;
  overflow-y: auto;
}
</style>
